<template>
  <div>
    <el-input v-model="userName" placeholder="请输入用户名"></el-input>
    <el-input v-model="password" placeholder="请请输入密码"></el-input>
    <el-button @click="login">登录</el-button>
    <el-button @click="connectWS">连接socket</el-button>
    <el-button @click="disconnectWS">断开连接</el-button>
    <el-button @click="personalSub">连接私人</el-button>
    <el-input v-model="input" placeholder="消息"></el-input>
    <el-input v-model="reciver" placeholder="发送对象"></el-input>
    <el-button @click="toSendPrivate">私人发送</el-button>
  </div>
</template>

<script>
  import SockJS from 'sockjs-client'
  import Stomp from 'stompjs'
export default {
  name: 'HelloWorld',
  data () {
    return {
      userName : '',
      password : '',
      msg: 'Welcome to Your Vue.js App',
      input: '',
      stompClient: null,
      reciver: '',
      socket : null
    }
  },
  methods: {
    connectWS () {
      var that = this
      var headers = {
        uid: this.userName
      }
      if(this.stompClient === null){
        var socket = new SockJS('/ws/ws')
        this.stompClient = Stomp.over(socket)
        this.stompClient.connect(headers,
          function connectionCallback (frame) {
            console.log('连接成功')
            // 这个是公共消息的监听
            that.stompClient.subscribe('/user/topic/chat', function (res) {
              var content = JSON.parse(res.body)
              console.log('私人消息：')
              console.log(content)
            },
            function (err){
              console.log('订阅失败');
              console.log(err);
            })
          },
          function errorCallBack(error) {
            console.log("连接失败："+error);
          }
        )
      }
      this.socket = socket
    },
    login(){
      console.log('login')
      this.$http(this.$api.login,{userName:this.userName,password: this.password}).then(res=>{
        console.log(res);
      })
    },
    personalSub(){
      var that = this
      if (this.stompClient!=null){
        this.stompClient.subscribe('/user/topic/chat', function (message) {
          console.log('私人消息');
          console.log( 'msg' +message);
        },
        function ( err){
          console.log("订阅失败！");
          console.log(err);
        });
      }
    },
    disconnectWS(){
      var that = this
      if(this.stompClient!=null){
        this.stompClient.disconnect( ()=>{
          console.log('disconnect success!')
        },{uid: that.userName});
        this.stompClient=null;
        that.socket.close();
      }
    },
    toSendPublic () {
      this.stompClient.send("/app/sendPublicMessage",{}, JSON.stringify({'content':this.input},))
    },
    toSendPrivate(){
      console.log("正在发送...");
      var that = this
      var headers = {
        uid: this.userName
      }
      this.stompClient.send("/app/sendPrivateMessage", headers,JSON.stringify({fromId:that.userName,toId:that.reciver,type:"test",content:that.input}))
    }
  },
  destroyed: function () {
    console.log("before destory")
    this.disconnectWS()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
